<template>
  <div class="shopRanking">
     <div class="cityRanking">
      <h3 class="title">出口航线目的国业务情况</h3>
        <ul class="list">
          <li>
            <span class="num">启运地</span>
            <span class="name" style="width:50%;">目的国
</span>
            <span class="danliang" style="width:40%">货运量（吨）</span>
          </li>
          <li>
            <span class="num">郑州</span>
            <span class="name" style="width:50%;">纽约</span>
            <span class="danliang" style="width:40%">10523.18
</span>
          </li>
           <li>
            <span class="num">郑州</span>
            <span class="name" style="width:50%;">列日</span>
            <span class="danliang" style="width:40%">10246.25 </span>
          </li>
            <li>
            <span class="num">郑州</span>
            <span class="name" style="width:50%;">洛杉矶</span>
            <span class="danliang" style="width:40%">8468.23 </span>
          </li>
   <li>
            <span class="num">郑州</span>
            <span class="name" style="width:50%;">伦敦</span>
            <span class="danliang" style="width:40%">879.95</span>
          </li>

   <li>
            <span class="num">郑州</span>
            <span class="name" style="width:50%;">荷兰</span>
            <span class="danliang" style="width:40%">505.97</span>
          </li>

        </ul>
    </div>
    <!-- <div class="cityRanking">
      <h3 class="title">出口商品大类排名(包)</h3>
        <ul class="list">
          <li v-for="(item,index) in goodClassExp" :key='index'>
            <span class="num">{{index+1}}</span>
            <span class="name" style="width:50%;">{{item.CLASS}}</span>
            <span class="danliang" style="width:40%">单量：<i>{{formatNumberRgx(item.DANLIANG)}}</i></span>
          </li>

        </ul>
    </div>
    <div class="cityRanking">
        <h3 class="title">出口目的国排名(包)</h3>
        <ul class="list">
         <li v-for="(item,index) in worldExport" :key='index'>
            <span class="img"><img :src="item.imgsrc"/></span>
            <span class="name">{{item.NAME}}</span>
            <span class="danliang">业务单量：<i>{{formatNumberRgx(item.TOTAL)}}</i></span>
          </li>
        </ul>
    </div> -->
  </div>
</template>

<script>
  export default {
    name: 'cityRanking',
    components: {

    },
    data() {
      return {
        //出口
        worldExport:[],
        //进口
        worldImport:[],
        goodClassExp:[]
      }
    },
    mounted() {
       this.getWorldCityInfo()
       this.getGoodClassInfo()
    },
    methods: {

		formatNumberRgx(num) {
		  var parts = num.toString().split(".");
		  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		  return parts.join(".");
		},
      getWorldCityInfo(){
        var that = this;
        that.$myHttp.post("getWorldCityInfo")
          .then(function(data0) {
            if (data0.status == "200") {

              if(data0.data.world_export.length>5){

                that.worldExport = data0.data.world_export.slice(0,6);
              }else{
                that.worldExport = data0.data.world_export;
              }
              if(data0.data.world_import.length>6){
                that.worldImport = data0.data.world_import.slice(0,6);
              }else{
                that.worldImport = data0.data.world_import;
              }
              // console.log(that.worldImport)
              var zhaojiaData = [{AREA_IMG: "canada.png",NAME: "加拿大",TOTAL: 0},{AREA_IMG: "australia.png",NAME: "澳大利亚",TOTAL: 0},{AREA_IMG: "america.png",NAME: "美国",TOTAL: 0},{AREA_IMG: "england.png",NAME: "英国",TOTAL: 0},{AREA_IMG: "yidali.png",NAME: "意大利",TOTAL: 0},{AREA_IMG: "russia.png",NAME: "俄罗斯",TOTAL: 0}]
              zhaojiaData.forEach((item,index)=>{
                that.worldImport.push(item)
              })
              // if(that.worldImport.length<6){
              //   that.worldImport = that.worldImport.concat()
              //    //
              // }
              that.worldImport = that.worldImport.slice(0,6);
              // console.log( that.worldImport)
               that.worldExport.forEach((item,index) => {
                 item.imgsrc = 'static/img/cn-country/'+item.AREA_IMG;
                });
              that.worldImport.forEach((item,index) => {

                 item.imgsrc = 'static/img/cn-country/'+item.AREA_IMG;
                });
              // console.log( that.worldExport)
              // console.log( that.worldImport)
            }  else {
              alert("数据请求错误")
            }

          })
          .catch(function(error) {
            alert(error)
          })
      },

    getGoodClassInfo(){
        var that = this;
        that.$myHttp.post("getGoodClassInfo")
          .then(function(data0) {
            if (data0.status == "200") {

               if(data0.data.hn_productclass.exp.length>6){
                that.goodClassExp = data0.data.hn_productclass.exp.slice(0,6);
              }else{
                that.goodClassExp = data0.data.hn_productclass.exp;
              }
            }  else {
              alert("数据请求错误")
            }

          })
          .catch(function(error) {
            alert(error)
          })
      },


    }
  }
</script>

<style scoped>
  /* .shopRanking {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cityRanking {
    width: 40%;
    height: 100%;
    overflow: hidden;
  }
  .cityRanking .title{
    color:#fff;
    font-size:.16rem;
    padding-bottom:.2rem;
  }
  .cityRanking .list{
    color:#78c3e9;
    font-size:.12rem;
    height: 80%;
    overflow: hidden;
  }
   .cityRanking .list li{
      padding:.05rem 0;
   }
    .cityRanking .list li{
      display: flex;
      justify-content: space-between;

    }
  .cityRanking .list li .num,.cityRanking .list li .img{
      width:.2rem;
      line-height:.2rem;
      height:.2rem;
      display:inline-block;
      text-align: center;
      margin-left:.1rem;
      font-size:.12rem;
      border-radius: .02rem;

      color:#fff;

    }
    .cityRanking .list li .img img{
      width:.2rem;
      margin-left:.05rem;
      height:.16rem;

    }
    .cityRanking .list li:nth-of-type(1) .num{
      background:#e52e04;
    }
    .cityRanking .list li:nth-of-type(2) .num{
      background:#ff6b08;
    }
    .cityRanking .list  li:nth-of-type(3) .num{
      background:#ffba01;
    }
    .cityRanking .list  li:nth-of-type(4) .num{
      background:#0071e5;
    }
    .cityRanking .list  li:nth-of-type(5) .num{
      background:#6224f8;
    }
    .cityRanking .list li:nth-of-type(6) .num{
      background:#222222;
    }
    .cityRanking .list li .name{
      width:40%;
       text-align: left;
       color:#fff;
       padding-left:5%;

    }
    .cityRanking .list li .name{
      width:40%;
       text-align: left;
    }
    .cityRanking .list li .danliang{
      width:50%;
       text-align: left;
    }
    .cityRanking .list li i{
     color:#46f8ff;
     font-size: .16rem;
    }
  .cityRanking .list li:nth-child(odd){

    background: linear-gradient(to right, #073a6d 0%, #032b5f 100%);
  } */

  .shopRanking {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cityRanking {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .cityRanking .title{
    color:#fff;
    font-size:.16rem;
    padding-bottom:.2rem;
  }
  .cityRanking .list{
    color:#78c3e9;
    font-size:.12rem;
    height: 80%;
    overflow: hidden;
  }
   .cityRanking .list li{
      padding:.05rem 0;
   }
    .cityRanking .list li{
      display: flex;
      justify-content: space-between;

    }
  .cityRanking .list li .num,.cityRanking .list li .img{
      width:30%;
      line-height:.2rem;
      height:.2rem;
      display:inline-block;
      text-align: center;
      margin-left:.1rem;
      font-size:.12rem;
      border-radius: .02rem;

      color:#fff;

    }
    .cityRanking .list li .img img{
      width:.2rem;
      margin-left:.05rem;
      height:.16rem;

    }
    /* .cityRanking .list li:nth-of-type(1) .num{
      background:#e52e04;
    }
    .cityRanking .list li:nth-of-type(2) .num{
      background:#ff6b08;
    }
    .cityRanking .list  li:nth-of-type(3) .num{
      background:#ffba01;
    }
    .cityRanking .list  li:nth-of-type(4) .num{
      background:#0071e5;
    }
    .cityRanking .list  li:nth-of-type(5) .num{
      background:#6224f8;
    }
    .cityRanking .list li:nth-of-type(6) .num{
      background:#222222;
    } */
    .cityRanking .list li .name{
      width:30%;
       text-align: left;
       color:#fff;
       padding-left:5%;

    }
    .cityRanking .list li .danliang{
      width:40%;
       text-align: left;
    }
    .cityRanking .list li i{
     color:#46f8ff;
     font-size: .16rem;
    }
  .cityRanking .list li:nth-child(odd){

    background: linear-gradient(to right, #073a6d 60%, #032b5f 100%);
  }
</style>
